<template>
	<div id="information">
		<div id="headDiv"></div>
		<img src="../assets/img/头像.png" id="headPhoto"/>
		<p id="textInf">Arksiar</p>
		<hr id="nameLine" />
		<ul>
			<li id="inf1" @click="A=true,B=false,C=false">
				<router-link to="/home/data">
					个人信息
				</router-link>
			</li>
			<li id="inf2" @click="A=false,B=true,C=false">
				<router-link to="/home/learn">
					学习总览
				</router-link>
			</li>
			<li id="inf3" @click="A=false,B=false,C=true">
				<router-link to="/home/more">
					查看更多
				</router-link>
			</li>
		</ul>
		<transition name="fadeInf">
			<router-view></router-view>
		</transition>
		
		
	</div>
</template>

<script>
	
	export default{
	data(){
	   	return{
	   		A:true,
	   		B:false,
	   		C:false,
	   	}
	}
	
}
</script>

<style>
	#information{
		position: relative;
		top: 35px;
		left: 5%;
		height: 500px;
		width: 90%;
		background-color: white;
		border: 1px solid #CCCCCC;
		border-radius: 5px;
		box-shadow: 0 0 5px #CCCCCC;
		float: left;
	}
	#headPhoto{
		width: 120px;
		height: 120px;
		position: absolute;
		top: 8%;
		left: 8%;
	}
	#headDiv{
		width: 130px;
		height: 130px;
		color: #515151;
		border: 1px solid #CCCCCC;
		border-radius: 65px;
		box-shadow: 0 0 5px #CCCCCC;
		position: absolute;
		top: 6.82%;
		left: 7.5%;
	}
	#textInf{
		position: relative;
		top: 185px;
		left: 108px;
		font-family: "微软雅黑";
		font-size: 30px;
		font-weight: 600;
		color: #515151;
	}
	#nameLine{
		position: relative;
		top: 190px;
		right: 452px;
		width: 150px;
	}
	router-view{
		position: absolute;
		top: 10%;
		left: 40%;
		width: 400px;
		height: 400px;
	}
	#information ul{
		position: relative;
		top: 45%;
		left: 9.8%;
	}
	#information li{
		position: absolute;
		font-size: 20px;
		font-weight: 500;
		font-family: "微软雅黑";
	}
	#information a{
		text-decoration:none;
		color: #515151;		
	}
	#inf1{
		top: 0px;
	}
	#inf2{
		top: 50px;
	}
	#inf3{
		top: 100px;
	}
    
</style>